<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist/vue.js"></script>
    <div id="app"></div>
    <script>
        
        // 异步组件的写法 有n种  返回promise  
        // 刚开始不加载，等组件解析完成了在加载  异步组件的实现原理是什么？
        // 图片懒加载 先渲染一个空组件 ，之后用渲染的组件在替换掉
        Vue.component('async-component', (resolve,reject) => {  // Vue.extend({}) .cid

            setTimeout(() => {
                    resolve({ // Vue.extend({})
                        render: h => h('h1', {}, 'zf')
                    })
                }, 1000);

            // return new Promise((resolve, reject) => {
            //     setTimeout(() => {
            //         resolve({
            //             render: h => h('h1', {}, 'zf')
            //         })
            //     }, 1000);
            // })
        })
        const vm = new Vue({
            el: '#app',
            render: (h) => {
                debugger;
               return h('async-component')
            }
        })
    </script>
</body>

</html>